<template>
	<div class="edit">
		<div id="editorjs" :style="{ minWidth: width, height: height }" class="overflow_y" ref="editorRef" v-if="isShow"></div>
	</div>
</template>
<script setup>
import { getAccessToken, getTenantId } from "@/utils/auth";
// 标题（Header）：用于设置文本的标题级别，支持多级标题。
// 段落（Paragraph）：用于添加普通文本段落。
// 引用（Quote）：用于添加引用文本块。
// 列表（List）：支持有序列表和无序列表。s
// 图像（Image）：可以插入图片，并指定图片的来源、标题和描述等属性。
// 插入链接（Link）：可以插入超链接，指定链接的URL、标题和打开方式等。
// 视频（Embed）：可以插入媒体内容的外部嵌入代码或链接。
// 表格（Table）：可以创建简单的表格，指定表格行数和列数。
// 代码（Code）：用于插入代码块，支持多种编程语言的语法高亮。
// 内容警告（Warning）：用于突出显示重要提示或警告。
// 勾选框（Checklist）：用于创建待办事项列表，可以勾选完成状态。
// 分割线（Delimiter）：用于在内容中插入水平分割线。
import EditorJS from "@editorjs/editorjs";
import Header from "@editorjs/header";
import List from "@editorjs/list";
import Paragraph from "@editorjs/paragraph";
// import Quote from '@editorjs/quote';
import Image from "@editorjs/image";
// import Embed from '@editorjs/embed';
import Table from "@editorjs/table";
import Code from "@editorjs/code";
import Delimiter from "@editorjs/delimiter";
import zh from "@/utils/i18n.json";
const emit = defineEmits(["update:modelValue"]);
const props = defineProps({
	modelValue: { type: String || Object },
	width: { type: String, default: "200px" },
	height: { type: String, default: "500px" },
	readOnly: { type: Boolean, default: () => false } //是否只读
});
const editorRef = ref(null);
const editor = ref(null);
const isShow = ref(false);
const getEditor = () => {
	isShow.value = true;
	editor.value = new EditorJS({
		holder: editorRef.value, //应该包含编辑器的元素Id
		//autofocus: true,//自动获取焦点
		placeholder: "请输入内容",
		data: props.modelValue,
		readOnly: props.readOnly,
		i18n: {
			messages: zh
		},
		logLevel: "VERBOSE", //日志级别   VERBOSE显示所有消息(默认) INFO显示信息和调试消息 WARN只显示警告消息 ERROR只显示错误信息

		//工具列表
		tools: {
			header: {
				class: Header,
				config: {
					placeholder: "输入标题"
				},
				inlineToolbar: ["link"]
			},
			list: {
				class: List,
				inlineToolbar: true
			},
			paragraph: {
				class: Paragraph,
				inlineToolbar: true
			},
			image: {
				class: Image,
				inlineToolbar: true,
				config: {
					uploader: {
						uploadByFile(file) {
							const formData = new FormData();
							formData.append("file", file); // 修改上传参数名为 image
							// 添加你的自定义请求头
							const headers = {
								Authorization: "Bearer" + getAccessToken(),
								"Tenant-Id": getTenantId()
							};
							return new Promise((resolve, reject) => {
								const formData = new FormData();
								formData.append("file", file);
								// 发送到服务器的示例代码，你需要根据实际情况修改
								fetch("http://192.168.10.3:24000/admin-api/infra/file/upload", {
									method: "POST",
									headers: headers,
									body: formData
								})
									.then((response) => response.json())
									.then((data) => {
										resolve({
											success: 1,
											file: {
												url: data.data
											}
										});
									})
									.catch((error) => {
										reject(error.message || error);
									});
							});
						}
					}
				}
			},
			table: {
				class: Table,
				inlineToolbar: true
			},
			code: {
				class: Code,
				inlineToolbar: true
			},
			delimiter: {
				class: Delimiter,
				inlineToolbar: true
			}
		}
	});
};
const saveEditor = async () => {
	const data = await editor.value.save();
	emit("update:modelValue", data);
	return data;
};
watch(
	() => [props.readOnly, props.modelValue],
	async () => {
		if (editor.value) {
			isShow.value = false;
			nextTick(() => {
				getEditor();
			});
		}
	},
	{ immediate: true }
);
onMounted(() => {
	getEditor();
});

defineExpose({ saveEditor });
</script>

<style lang="scss" scoped>
:deep(.ce-toolbar__actions) {
	left: 10px;
}
:deep(.ce-block__content) {
	margin: 0;
	padding-left: 70px;
	max-width: 100vw;
}
:deep(.ce-toolbar__content) {
	max-width: 100vw;
}
.edit {
	background-color: #fff;
	border-radius: 20px;
	box-shadow: 0 -3px 29px -5px rgba(34, 39, 47, 0.14);
	padding-top: var(--canvas-padding-top);
	width: 100%;
	height: 100%;
}
</style>
